<script setup>
import Product from '@/components/Shop/Product.vue'
import ShopInfo from '@/components/Home/ShopInfo.vue'
import { useRoute, useRouter } from 'vue-router'
import { useCounterStore } from '@/stores/counter';
import { computed, ref } from 'vue';
import CartButton from '@/components/Cart/CartButton.vue'

const route = useRoute()
const counterStore = useCounterStore()

// 获取当前 url 参数 id
const id = route.query.id
// 查询仓库集合中 id 为当前id的对象，传给 ShopInfo组件进行渲染
const shopInfo = counterStore.nearbyList.find(item => item.id == id)

// 获取分类列表名，存入数组，进行循环渲染
const categoryList = computed(() => {
    let arr = []
    shopInfo.category.forEach(item => {
        arr.push(item.name)
    })
    return ['全部商品', ...arr]
})

// 定义高亮索引
const activeIndex = ref(0)

// 处理全部商品（计算属性有监听的效果）
const allCategory = computed(() => {
    let arr = []
    shopInfo.category.forEach(item => {
        arr.push(...item.list)
    })
    return arr
})

// 定义 默认为全部商品
const categoryProduct = ref(allCategory.value)

const onChangeCategory = (index) => {
    // 改变高亮
    activeIndex.value = index
    // 判断分类，替换相应的数据 传给组件，进行渲染
    if (index == 0) {
        categoryProduct.value = allCategory.value
    } else {
        categoryProduct.value = shopInfo.category[index - 1].list
    }
}

// 获取当前商店的所有商品列表，传递给 Product组件进行渲染
</script>

<template>
    <div class="shop">
        <!-- 搜索 -->
        <div class="search">
            <span class="iconfont search_back">&#xe697;</span>
            <div class="search_content">
                <span class="iconfont search_content_icon">&#xe632;</span>
                <input type="text" class="search_content_input" placeholder="请输入商品名称">
            </div>
        </div>
        <!-- 商店信息 -->
        <div class="shop_info">
            <ShopInfo :item="shopInfo"></ShopInfo>
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="category">
                <div class="category_item" :class="{ 'category_item--active': activeIndex === index }"
                    v-for="(item, index) in categoryList" :key="index" @click="onChangeCategory(index)">{{ item }}
                </div>
            </div>
            <div class="product" >
                <div v-for="item in categoryProduct">
                    <Product :category="item" :shopName="shopInfo.name"></Product>
                </div>
            </div>
        </div>
        <!-- 购物车底部 -->
        <CartButton :shopName="shopInfo.name"></CartButton>

    </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";

.shop {

    //搜索
    .search {
        margin: .18rem;
        display: flex;
        align-items: center;

        &_back {
            font-size: .24rem;
            margin-right: .08rem;
            color: #b6b6b6;
        }

        &_content {
            flex: 1;
            height: .32rem;
            background-color: #f5f5f5;
            border-radius: .16rem;
            display: flex;
            align-items: center;

            &_icon {
                color: #b6b6b6;
                margin: 0 .12rem;
            }

            &_input {
                border: none;
                outline: none;
                background: none;
                width: 100%;
                height: .32rem;
            }
        }
    }

    //商店信息
    .shop_info {
        margin: 0 .18rem;
    }

    // 内容
    .content {
        position: absolute;
        left: 0;
        right: 0;
        top: 1.7rem;
        bottom: .5rem;
        display: flex;

        .category {
            overflow-y: scroll;
            width: .78rem;
            background-color: #f5f5f5;

            &_item {
                line-height: .4rem;
                font-size: .14rem;
                text-align: center;
                color: $content_fontcolor;

                &--active {
                    background-color: #e0dcdc;
                }
            }
        }

        .product {
            flex: 1;
            overflow-y: scroll;
        }
    }
}
</style>